<template>
    <view
        class="wx-top-status-bar"
        :style="{ backgroundColor: backgroundColor, position: props.position || 'sticky' }"
    >
        <view :style="{ height: statusBarHeight + 'px' }">
            <slot name="statusBar"></slot>
        </view>
        <view
            v-if="coustom"
            :style="{
                height: menuButtonHeight + 'px',
                width: left + 'px'
            }"
        >
            <slot></slot>
        </view>
        <view
            v-else
            :style="{
                height: menuButtonHeight + 'px',
                width: left + 'px'
            }"
            class="flex-row"
        >
            <view
                class="backIcon"
                :style="{
                    width: `calc(750rpx - ${left}px )`
                }"
                @click="back"
            >
                <slot name="icon">
                    <image
                        v-if="isBack"
                        style="width: 20rpx"
                        :src="$getImg('/img/common/toLeft.png')"
                        mode="widthFix"
                    ></image>
                </slot>
            </view>
            <view class="title flex-center flex-1">
                <slot></slot>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
const props = defineProps({
    position: {
        type: String,
        default: 'sticky'
    },

    backgroundColor: {
        default: 'transparent',
        type: String
    },
    isBack: {
        type: Boolean,
        default: true
    },
    coustom: {
        type: Boolean,
        default: false
    }
})

const { statusBarHeight } = uni.getSystemInfoSync()

// 条件渲染 微信

// #ifdef MP-WEIXIN

const { height, left } = uni.getMenuButtonBoundingClientRect()

// #endif

// #ifdef H5
const { height, left } = { height: 0, left: 0 }

// #endif

const menuButtonHeight = height + 8
console.log(menuButtonHeight)
const emit = defineEmits(['init'])
onLoad(() => {
    emit('init', menuButtonHeight + statusBarHeight)
})

const back = () => {
    if (props.isBack) uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.wx-top-status-bar {
    top: 0;
    z-index: 99;
}

.backIcon {
    padding-left: 40rpx;
    display: flex;
    align-items: center;

    ::v-deep image {
        width: 24rpx;
    }
}
</style>
